<!--
 * @Author: your name
 * @Date: 2020-09-03 16:14:48
 * @LastEditTime: 2021-01-11 16:12:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/Gatt/components/GattLeft.vue
-->
<template>
  <div class="gatt-table">
    <el-table
      :data="tableData"
      ref="tableMenu"
      @expand-change="exChange"
      height="100%"
      row-key="id"
      border
      default-expand-all
      @row-click="handlerRowClick"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <template v-for="(val,key) in fieldsAttr">
        <el-table-column
          v-if="val.showTable"
          :key="key"
          show-overflow-tooltip
          :prop="key"
          :label="val.label"
          :width="val.width"
          >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import { transformTree } from '@/common/utils'
export default {
  name: 'GattLeft',
  computed: {
    tableData () {
      // 扁平树形化
      return transformTree(this.list)
    }
  },
  props: {
    BGScrollTop: Number
  },
  data () {
    return {
      // 出口的线与连线之间的diff间距top
      fromTopDiff: 26,
      list: [],
      fieldsAttr: {}
    }
  },
  watch: {
    BGScrollTop: {
      handler: function (newValue) {
        const table = this.$refs.tableMenu.bodyWrapper
        table.scrollTo(0, newValue)
      }
    }
  },
  mounted () {
    this.handlerWatchScroll()
  },
  methods: {
    init (list, fieldsAttr) {
      this.list = list
      this.fieldsAttr = fieldsAttr
    },
    handlerWatchScroll () {
      const table = this.$refs.tableMenu.bodyWrapper
      table.addEventListener('scroll', e => {
        this.$emit('TableScrollTop', e.srcElement.scrollTop)
      })
    },
    // rowClick事件
    handlerRowClick (row) {
      this.$emit('handlerRowClick', row)
    },
    // 展开收缩
    exChange (row, expand) {
      let len = 0
      loop(row, expand, this.list)
      loopLen(row)
      const rowIndex = this.list.findIndex(item => {
        return item.id === row.id
      })
      this.list[rowIndex].expand = expand
      this.resetTop(rowIndex, !expand, len, true)
      // 递归数据修改len
      function loopLen (row) {
        if (row.children && row.children.length) {
          row.children.forEach(item => {
            len++
            if (item.expand && item.children && item.children.length) {
              loopLen(item)
            }
          })
        }
      }
      // 递归显示隐藏与否
      function loop (row, expand, list) {
        if (row.children && row.children.length) {
          row.children.forEach(item => {
            list.forEach(k => {
              if (k.id === item.id) {
                k.isShow = expand
              }
            })
            if (item.children && item.children.length) {
              loop(item, expand, list)
            }
          })
        }
      }
    },
    // 修改后续高度
    resetTop (zindex, reduce, len, isexpand) {
      const num = reduce ? -40 : 40
      if (!reduce && !isexpand) {
        // console.log(2);
        // this.list.forEach((item, index) => {
        //   if (index > zindex) {
        //     item.top = item.top + 40
        //     if (item.children && item.children.length > 0) {
        //       item.children.forEach((k, i) => {
        //         k.top = item.top + 40 * i + 40
        //       })
        //     }
        //   }
        // })
      } else {
        this.list.forEach((item, index) => {
          if (index > zindex) {
            item.top = item.top + num * len
          }
        })
      }
    },
    // 获取制定树形数据中的某一项数据
    getChidlren (id, data) {
      var hasFound = false // 表示是否有找到id值
      var result = null
      function fn (data) {
        if (Array.isArray(data) && !hasFound) { // 判断是否是数组并且没有的情况下，
          data.forEach(item => {
            if (item.id === id) { // 数据循环每个子项，并且判断子项下边是否有id值
              result = item // 返回的结果等于每一项
              hasFound = true // 并且找到id值
            } else if (item.children) {
              fn(item.children) // 递归调用下边的子项
            }
          })
        }
      }
      fn(data) // 调用一下
      return result
    }
  }
}
</script>

<style lang="stylus" scoped>
.gatt-table
  height 100%
  overflow-y scroll
  >>>.el-table--medium
    th
      padding 8px 0
    td
      padding 8px 0
</style>
